import React, { Fragment, createRef, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import "./index.scss";
import { Select, Input, message, Modal, Divider } from "antd";
import { text_check, post_axios } from "../../utils";
import MyCheckBox from "./menuCheckBox";

export default function EditRole(props) {
  const { t } = useTranslation();
  const {
    edit_role_title,
    edit_role_show,
    setEdit_role_show,
    search_data,
    edit_type,
    menu_power_array,
    role_action_array,
    local_company_object,
    clicked_role_id,
    clicked_role_obj,
  } = props;
  const [role_name, setRole_name] = useState("");
  const [action_value, setAction_value] = useState("");

  const childRefs = [];

  const bind_action_value_change = (value, array) => {
    console.log(value, array);
    setAction_value(value);
  };

  const edit_role_confirm = async () => {
    let updata_arr = [];
    childRefs.forEach((ref) => {
      updata_arr.push(...ref.current.checkedList);
    });
    if (role_name === "") {
      message.warning({
        content: t("system_manager.enter_role_name"),
      });
      return;
    }
    if (action_value === "") {
      message.warning({
        content: t("system_manager.select_role_grade"),
      });
      return;
    }
    if (updata_arr.length === 0) {
      message.warning({
        content: t("system_manager.select_role_menu_power"),
      });
      return;
    }
    let upMsg = {
      role_name: role_name,
      role_grade: action_value,
      company_id: local_company_object.id,
      company: local_company_object.company,
      array_action: updata_arr,
    };
    let res = "";
    if (edit_type === "add") {
      res = await post_axios("role_manager", "m_add", upMsg);
    } else {
      upMsg["role_id"] = clicked_role_id;
      res = await post_axios("role_manager", "m_modify", upMsg);
    }
    if (!res) return;
    message.success({
      content: edit_role_title + " " + t("common.successfully"),
    });
    setEdit_role_show(false);
    search_data();
  };
  useEffect(()=>{
    setTimeout(() => {
      setRole_name(edit_type === "change" ? clicked_role_obj.role_name : "");
      setAction_value(edit_type === "change" ? clicked_role_obj.role_grade : "");
    }, 100);
  },[])
  return (
    <>
      <Modal
        title={edit_role_title}
        open={edit_role_show}
        onOk={edit_role_confirm}
        onCancel={() => setEdit_role_show(false)}
        classNames={{ body: "edit_dialog_body", wrapper: "fullscreen" }}
        maskClosable={false}
        destroyOnClose={true}
      >
        <div className="add_role_content">
          <div className="add_role_ipt_row">
            <div className="ipt_box">
              <div className="ipt_box_title">
                {t("system_manager.role_name_new")}
              </div>
              <Input
                placeholder=" "
                value={role_name}
                onChange={(e) => setRole_name(e.target.value)}
              />
            </div>
            <div className="ipt_box long_title">
              <div className="ipt_box_title">
                {t("system_manager.role_grade_new")}
              </div>
              <Select
                placeholder=" "
                options={role_action_array}
                value={action_value}
                onChange={bind_action_value_change}
              />
            </div>
          </div>
          <div className="ipt_tree_box">
            {menu_power_array.map((menu) => {
              return (
                <Fragment key={menu.msg_en}>
                  <Divider>{text_check(menu)}</Divider>
                  <div className="check_group_content">
                    {menu.children.map((item) => {
                      const ref = createRef();
                      childRefs.push(ref);
                      return (
                        <MyCheckBox ref={ref} key={item.msg_en} item={item} />
                      );
                    })}
                  </div>
                </Fragment>
              );
            })}
          </div>
        </div>
      </Modal>
    </>
  );
}
